<!--
 * @Description:
 * @version:
 * @Author: 尹鹏孝
 * @Date: 2023-02-22 17:23:28
 * @LastEditors: 尹鹏孝
 * @LastEditTime: 2023-02-26 10:01:53
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html基础</title>
</head>
<body>
    <h1>html:hyperText markup language</h1>
    <p>html是标记语言并不是编程语言</p>
    <p>标记语言是一套标记标签和markdown一样里面的标签代表不同意思</p>
    <p>HTML文档包含了html的标签和内容，html页面也叫web页面</p>
    html页面的完整组成：
    文档声明：
    <code>
        <!doctype html>
        <html>

        <head>
            <meta charset="utf-8">
            <title>标题</title>

            <link href="" rel="shortcut icon">
            <link href="" rel="stylesheet">
            <style>

            </style>
            <script>
            </script>
        </head>

        <body>
            <h1>内容</h1>
        </body>

        </html>
    </code>

    doctype html 不区分大小写，告诉浏览器使用哪只html版本，html4.01中需要引入DTD声明，
    xhtml、xml、html、xhtml、和html5?
    他们都源于gml（称为通用标记语言），是ibm开发的用于组装文档工具的，也是ibm的文档工具在主要组成部分。
    随着技术的发展，人们发现gml相对单一，落后，随后出现了sgml:
    sgml标准通用语言。
    sgml具有高稳定，高可携带，高完整性，缺点是很复杂，费用昂贵。sgml的dtd
    dtd称为文档类型定义，有元素、属性，实体，注释
    doctype分为strict严格模式，transitional过渡模式（也称为兼容模式）和frameset框架模式。
    html标签是固定的但是xml的标签是可以自己定义，数量理论上是可以无限多。html标签数量是有限的。
    html5是html的第五个版本，目标是语义化，更好的被人类和机器月底，同时提供更好的媒体嵌入。
    xhtml是可拓展超媒体标记，表达方式和html类似但是比html更严格，xhtml终止于1.1，2.0停止在草案阶段。


    <code>
        <!DOCTYPE html> 和
        <HEAD>中head里的注释
            <!—[if IE 7 ]>
                <html class="ie ielt9 ielt8 ie7" lang="en-US">
                <![endif]—>
                <!—[if IE 8 ]>
                <html class="ie ielt9 ie8" lang="en-US">
                <![endif]—>
                <!—[if IE 9 ]>
                <html class="ie ie9" lang="en-US">
                <![endif]—>
                <!—[if (gt IE 9)|!(IE)]>
                <!—>
                    <html lang="en-US">
                    <!—<![endif]—>

    </code>

    <abbr title="world wide web">WTO</abbr>
    <address>
        对对对
        pwd
        www@qq.com
    </address>
    <img usemap="#plantMap" src="https://www.runoob.com/try/demo_source/planets.gif">
    <map name="plantMap">
        <area  shape="rect" coords="0,0,82,126" alt="sun" href="sun.html"/>
        <area shape="circle" coords="90,58,3" alt="Mercury" href="Mercury.html" />
        <area shape="circle" coords="124,58,8" alt="venus" href="venus.html" />
    </map>

    <article>
        文章来源，论坛，帖子，博客，评论，新闻故事
    </article>
    <aside>
        侧边栏
    </aside>
    <audio autoplay controls loop muted preload="auto">
        <source src="horse.ogg" type="audio/ogg"/>
        <source src="horse.mp3" type="audio/mpeg" />
        <source src="horse.wav" type="audio/wav" />
    </audio>
    <h2>二级标题</h2>
    <mark>book mark  <em>ass</em>  used <strong>尹鹏孝</strong></mark>
    strong和em的区别：strong是粗体，em是斜体。strong表示强壮的全局强调，em是局部强调，em会改变句子的语义，strong不会。
    i标签也是斜体。
    b标签也是粗体，但是仅仅只是样式粗体
    b,strong,em,i 标签的区别。
    b标签是加粗，只是样式bold的加粗，strong也是加粗但是是语义的加粗和强调，
    em也做强调但是em还会改变语义的意思，em 是斜体，em强调的是局部，strong强调的是全局，i标签仅仅是倾斜的单词缩写


    base标签，规定相对url的默认行为，一般用于head的第一个子元素，
    bid是html5新增的标签，用于隔离标签。
    bdo标签用于修改文本的展示顺序 dir=ltl或者rtl。
    <blockquote>引用</blockquote>大段引用
    <q>引用</q>短引用
    body属性用于定义包含各类展示标签的地方。也是html文档主体内容
    <br/>换行分割符
    button标签用于设置一个按钮，和input type=button的区别是button可以包含图片，包含背景图。文本二input不行。


    canvas 是html新增标签
    caption带有标题的表格
    cite定义作品的标题
    code标签用于指定文本进行格式化。定义的是计算机代码文本
    col和colgroup用于设置内部列的属性只能用于表格
    command标签：用户调用标签，Html5新增标签，但是除了ie其他浏览器都不支持

    datalist标签html5新增标签：规定了input的可能选项列，里面是option，datalist的id和input的list值一样，就可以关联。
    dd标签是带有项目和描述的标签列表在dt中使用，标签内，您能放置段落、换行、图片、链接、列表等等
    dt在dl中使用，标签定义一个描述列表的项目/名字
    dl：带有项目和描述的描述列表：
    del带有删除和ins新插入的文本有时候会共同出现
    dfn标签定义一个内容，
    dialog：html新增标签，edge浏览器不支持
    div标签。前端最通用标签

    embed标签：引入外部应用或者媒体但是不建议使用了。

    fieldset标签，配合legend标签用于对表单进行分组。
    <form>
        <fieldset>
            <legend>这标题</legend>

        </fieldset>
    </form>
    figure:标记图像，
    figcaption：标记图像标题
    <figure>

        <figcaption>这个figcaption图片</figcaption>
        <img src="https://www.runoob.com/try/demo_source/img_pulpit.jpg" />
    </figure>

    footer标签：在典型情况下，该元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。
<footer>
    <address>
        ddd：订单
    </address>
</footer>
form标签下可包含一个或者多个input、button 、textarea、select 、option、optgroup、fieldset 、label
form 的action、autocomplete 、method 、enctype 、name \ novalidate \target \

head 标签包括了title style  base link script noscript
header 标签定义文档或者文档的一部分区域的页眉。元素应该作为介绍内容或者导航链接栏的容器在一个文档中，您可以定义多个 header 元素。header标签不能被放在 footer、address 或者另一个 header 元素内部

hgroup:对标题进行组合：标签被用来对标题元素进行分组
h1-h6:h1 定义重要等级最高的标题。h6 定义重要等级最低的标题。
当内容的主题发生变化时，使用
hr 标签进行分隔：
iframe:一个内联框架被用来在当前 HTML 文档中嵌入另一个文档 sandbox,seamless,HTML_code
img:标签定义 HTML 页面中的图像。标签有两个必需的属性：src 和 alt。loading:指定加载方式，eager，lazy，alt:替换文本，crossorigin：跨域属性，
img的usemap 属性将图像定义为客户端图像映射（图像映射指的是带有可点击区域的图像）。
img的usemap 属性与 map元素的 name 或 id 属性相关联，以建立 img与map之间的关系。只有当 img 元素不属于 a 或 button元素的后代时，才允许使用 usemap 属性。

input 标签：用label来标注input。accept支持的类型，type=image时候，设置alt，multiple：多个值，max,min maxlength ,list 规定datalist的默认值pattern正则验证。required:提交前必须不为空，step合法数字间隔，type：button、checkbox、color、date、datetime\datetime-local\email\file\hidden\image\month\week\url\time\tel\text\search\number\password\range\reset\submit\text\、value
ins:规定查人标签
label标签：label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。标签的 for 属性应当与相关元素的 id 属性相同。
legend：组合表单中的相关元素：
一个有序列表 (ol) 和 一个无序列表 (ul) :li标签，
link标签定义文档与外部资源的关系。link 元素是空元素，它仅包含属性。此元素只能存在于 head 部分，不过它可出现任何次数。link的属性，rel是规定外部关系，type是mime_type类型，media规定用于什么媒体，hreflang语言，href是地址。

main标签：使用 main 标签来展示文档的主体部分：标签中的内容在文档中是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。

注意在一个文档中，main 元素是唯一的，所以不能出现一个以上的main元素。main元素不能是以下元素的后代：article、aside、footer、header 或 nav。
map标签：带有可点击区域的图像映射：标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像img中的 usemap 属性可引map的id和name关联area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。
mark标签表示文本高亮，
meta标签：描述 HTML 文档的元数据：数据的数据信息元数据不会显示在客户端，但是会被浏览器解析META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。注意：
meta标签通常位于head区域内。 注意： 元数据通常以 名称/值 对出现。注意： 如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。属性：charset字符编码，content：定义与 http-equiv 或 name 属性相关的元信息。http-equiv:content-type
default-style
refresh把 content 属性关联到 HTTP 头部。
name:application-name
author
description
generator
keywords
把 content 属性关联到一个名称。


meter标签和progress 标签和input 设置type= range区别：
meter：使用 meter 元素展示给定的数据范围：标签定义度量衡。仅用于已知最大和最小值的度量，比如：磁盘使用情况，查询结果的相关性等。
progress表示进度条可以伸缩进度，input range 表示范围
行车速度：0<meter name="speed" value="20" min="0" max="200" low="20" high="160"></meter>200千米/小时<br />
任务完成比：0<progress value="30" max="100">30/100</progress>100<br />
<input type="range" max="200" step="10" min="0" value="100">
nav:标签定义导航链接的部分。

并不是所有的 HTML 文档都要使用到 nav元素。nav元素只是作为标注一个导航链接的区域。在不同设备上（手机或者PC）可以制定导航链接是否显示，以适应不同屏幕的需求。


noscript:元素用来定义在脚本未被执行时的替代内容（文本）。此标签可被用于可识别 noscript 标签但无法支持其中的脚本的浏览器。

object 标签：元素在 HTML 加入 Flash 文件签用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash object 的初衷是取代 img 和 applet 元素。不过由于漏洞以及缺乏浏览器支持，这一点并未实现。

浏览器的对象支持有赖于对象类型。不幸的是，主流浏览器都使用不同的代码来加载相同的对象类型。

而幸运的是，object 对象提供了解决方案。如果未显示 object 元素，就会执行位于 object 和 /object之间的代码。通过这种方式，我们能够嵌套多个 object 元素（每个对应一个浏览器）。

ol标签：有序列表。type:a,A,i,1

optgroup相关选项分组。
option选项。标签中的内容作为select或者datalist的一个元素使用。标签可以在不带有任何属性的情况下使用，但是您通常需要使用 value 属性，此属性会指示出被送往服务器的内容。注释：请与 select 元素配合使用此标签，否则这个标签是没有意义的。提示：如果列表选项很多，可以使用optgroup分组。option的label属性用于定义当使用optgroup 时所使用的标注。
output表示输出：
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
    0
    <input type="range" id="a" value="50">100
    +<input type="number" id="b" value="50">
    =<output id="x" for="a,b"></output>
</form>

p标签：段落


param标签：签支持大部分主流浏览器。但是 object 定义的文件格式不是所有的浏览器都支持。元素允许您为插入 XHTML 文档的对象规定 run-time 设置，也就是说，此标签可为包含它的 object 或者 applet标签提供参数
<object data="horse.wav">
    <param name="autoplay" value="true">
</object>

pre：预格式化文本，标签可定义预格式化的文本。被包围在pre标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
html标签的manifest是追加缓存文件的。
picture标签：
<picture>
    <source media="(min-width: 650px)" srcset="https://static.runoob.com/images/mix/html-css-js.png">
    <source media="(min-width: 465px)" srcset="https://static.runoob.com/images/mix/htmlbig.png">
    <img decoding="async" src="https://static.runoob.com/images/mix/img_avatar.png"  style="width:auto;">
</picture>
picture 元素允许我们在不同的设备上显示不同的图片，一般用于响应式。

HTML5 引入了 picture元素，该元素可以让图片资源的调整更加灵活。

    picture元素零或多个
        source元素和一个 img元素，每个
        source 元素匹配不同的设备并引用不同的图像源，如果没有匹配的，就选择 img 元素的 src 属性中的 url。

        注意:img元素是放在最后一个 picture>元素之后，如果浏览器不支持该属性则显示 img元素的的图片。




progress：标记"下载进度"：标签定义运行中的任务进度（进程）标签不适合用来表示度量衡（例如，磁盘空间使用情况或相关的查询结果）。表示度量衡，请使用 meter标


q标签表示一个引用，blockquote来标记摘自另一个源的块引用,cite="URL"
<p>WWF's goal is to:
    <q>Build a future where people live in harmony with nature.</q>
    We hope they succeed.
</p>

rp元素是ruby的子元素，用于解析ruby内容。标签定义 ruby 注释（中文注音或字符），元素由一个或多个需要解释/发音的字符和一个提供该信息的 rt 元素组成，还包括可选的
rp 元素，定义当浏览器不支持 "ruby" 元素时显示的内容。
<ruby>
    汉 <rp>(</rp>
    <rt>Han</rt>
    <rp>)</rp>
    字 <rp>(</rp>
    <rt>zi</rt>
    <rp>)</rp>
</ruby>

s:HTML5 重定义了 s 元素，现在是被用来定义那些不正确的文本。
samp:格式化标签

script标签

section表示区域。标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。
select：表示选项。
small标签表示小。标签定义小型文本（和旁注）。

source:带有两个源文件的音频播放器。浏览器需要选择它所支持的源文件（如果都支持则任选一个）：media:规定资源媒体尺寸，type是mime 类。src规定资源地址。srcset用于指定picture的不同尺寸media页面大小。

span表行内元素用于对文档中的行内元素进行组合> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异。


strong标签：对文档中的文本进行格式化标签是一个短语标签，用来定义计算机程序的样本重要的文本我们并不反对使用这个标签，但是如果您只是为了达到某种视觉效果而使用这个标签的话，我们建议您使用 CSS ，这样可能会取得更丰富的效果。


style标签样式标签scoped属性则样式仅仅应用到 style 元素的父元素及其子元素。media不同媒体，

sub标签下标标签。标签定义下标文本。下标文本将会显示在当前文本流中字符高度的一半为基准线的下方，但是与当前文本流中文字的字体和字号都是一样的。下标文本能用来表示化学公式，比如 H2O，sup表示上标
summary表示标签为 details元素定义一个可见的标题。 当用户点击标题时会显示出详细信息。
<details>
    <summary>Epcot Center</summary>
    <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions,
        award-winning fireworks and seasonal special events.</p>
</details>

table标签table更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot以及tbody一个或多个tr、th以及td

textarea：表示文本域标签定义一个多行的文本输入控件。

文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。wrap规定当提交表单时，文本区域中的文本应该怎样换行


template使用 template标签在页面加载时该标签中的内容不会显示，加载后可以使用 JavaScript 来显示它：

tfoot：标签用于组合 HTML 表格的页脚内容。
th:表头单元格
<table border="1">
    <tr>
        <th>Month</th>
        <th>Savings</th>
    </tr>
    <tr>
        <td>January</td>
        <td>$100</td>
    </tr>
</table>
带有 thead、tfoot和 tbody 元素的 HTML 表格：
<table border="1">
    <thead>
        <tr>
            <th>Month</th>
            <th>Savings</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Sum</td>
            <td>$180</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>January</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>February</td>
            <td>$80</td>
        </tr>
    </tbody>
</table>
time:如何定义时间和日期：
<p>我们在每天早上 <time>9:00</time> 开始营业。</p>

<p>我在 <time datetime="2016-02-14">情人节</time> 有个约会。</p>

title:为您的 HTML 文档定义标题：标签定义文档的标题，在所有 HTML 文档中是必需的。定义浏览器工具栏中的标题提供;页面被添加到收藏夹时的标题;显示在搜索引擎结果中的页面标题


tr标签：一个简单的 HTML 表格，包含两列两行：
<table border="1">
    <tr>
        <th>Month</th>
        <th>Savings</th>
    </tr>
    <tr>
        <td>January</td>
        <td>$100</td>
    </tr>
</table>


track标签：字幕
<video controls width="320" height="240" src="https://www.runoob.com/video/php/friday.mp4">
    <track default kind="captions" srclang="en" src="./friday.vtt" />
    抱歉，您的浏览器不支持嵌入视频！
</video>


HTML5 中重新定义了 u元素，它定义与常规文本风格不同的文本，像拼写错误的单词或者汉语中的专有名词。

ul无序 HTML 列表

var对文档中的文本进行格式化：是一个短语标签，用来定义变量。提示：我们并不反对使用这个标签，但是如果您只是为了达到某种视觉效果而使用这个标签的话，我们建议您使用 CSS ，这样可能会取得更丰富的效果。
video：标签定义视频，比如电影片段或其他视频流。MP4、WebM、Ogg可以在 video 标签之间放置文本内容，这样不支持元素的浏览器就可以显示出该标签的信息。autoplay:自动播放，controls控制器按钮，loop：循环，muted：静音，poster：下载时候封面，点击播放之前展示，preload:介入下载

wbr(Word Break Opportunity) 标签规定在文本中的何处适合添加换行符。

提示：如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用 wbr 元素来添加 Word Break Opportunity（单词换行时机）
<p>学习 AJAX ,您必须熟悉 <wbr>Http<wbr>Request 对象。</p>




















</body>
</html>